<template>
    <div class="app-container">
        <el-card class="filter-container" shadow="never">
            <el-row>
                <i class="el-icon-search"></i>
                <span class="search-title">筛选条件</span>
            </el-row>
            <el-row class="row-margin">
                <el-form
                    :inline="true"
                    :model="requestSearch"
                    class="demo-form-inline"
                    ref="researchForm"
                    prop="categoryId"
                >
                    <el-form-item prop="searchWords">
                        <el-input
                            placeholder="供货商名称/联系人/联系人手机"
                            v-model="requestSearch.searchWords"
                            style="width:300px"
                        ></el-input>
                    </el-form-item>

                    <el-form-item prop="search">
                        <el-row type="flex">
                            <el-button type="primary" @click="handleSearch" style="margin-left:10px"
                                >查询</el-button
                            >
                            <el-button @click="handleReset" style="margin-left:10px"
                                >重置</el-button
                            >
                        </el-row>
                    </el-form-item>
                    <el-form-item style="float:right">
                        <el-button type="primary" @click="addSupplier">新增供应商</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
        </el-card>

        <el-table :data="supplierList" style="width: 100%" border ref="supplierListInfo">
            <el-table-column label="供应商名称" width="300" align="center">
                <template slot-scope="scope">
                    <el-row type="flex" justify="center">
                        {{ scope.row.name }}
                    </el-row>
                </template>
            </el-table-column>
            <el-table-column label="联系人" prop="contactor" align="center"></el-table-column>

            <el-table-column label="联系方式" prop="mobile" align="center">
                <template slot-scope="scope">
                    {{ scope.row.mobile }}
                </template>
            </el-table-column>

            <el-table-column label="办公地址" prop="address" align="center"></el-table-column>
            <el-table-column label="合作商品" prop="goodsCount" align="center"> </el-table-column>
            <el-table-column label="累计结算" prop="settledAmount" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row type="flex" justify="end" class="pagination">
            <el-pagination
                background
                layout="total, sizes,  prev, pager, next, jumper"
                @current-change="handleCurrentChange"
                :page-sizes="[5, 10, 15, 20]"
                @size-change="handleSizeChange"
                :page-size="requestSearch.pageSize"
                :total="pagiData.total"
                :current-page.sync="requestSearch.pageNum"
            ></el-pagination>
        </el-row>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getSupplierList } from '@/api/supplier';

export default {
    name: 'supplier',
    computed: {
        ...mapGetters(['goodsDetailInfo'])
    },
    mounted() {},
    data() {
        return {
            requestSearch: {
                pageNum: 1,
                pageSize: 20
            },
            supplierList: [],
            categoryList: [],
            supplierList: [
                {
                    supplierName: 'test',
                    sales: 128,
                    coverUrl: '',
                    id: '1'
                }
            ],
            pagiData: {
                total: 100,
                current: 1
            }
        };
    },
    created() {
        this._refresh(); //for pg
    },
    methods: {
        _refresh() {
            this.getTableList(this.requestSearch);
        }, // 获取列表， 更新分页
        getTableList(queryData) {
            getSupplierList(queryData).then(res => {
                let resdata = res.data;
                if (resdata && resdata.success) {
                    this.supplierList = resdata.data instanceof Array ? resdata.data : [];
                    this.pagiData.total = resdata.extra ? resdata.extra.total : 0;
                } else {
                    this.supplierList = [];
                }
            });
        },
        // 重置分页
        handleSearch() {
            this.requestSearch.pageNum = 1;
            if (this.requestSearch.categoryId == null) {
                delete this.requestSearch['categoryId'];
            }
            if (this.requestSearch.nameOrCode == null) {
                delete this.requestSearch['nameOrCode'];
            }
            if (this.requestSearch.supplierId == null) {
                delete this.requestSearch['supplierId'];
            }
            this.getTableList(this.requestSearch);
        },
        // 重置页面， 包括搜索框，分页,
        handleReset() {
            this.$refs.researchForm.resetFields();
        },
        handleEdit(index, row) {
            this.$router.push(`update/${row.id}`); // go to
        },
        showSalesModal(index, row) {
            this.countSaleGoodsId(row.id);
            this.countSalesVisible = true;
        },
        handleCurrentChange(val) {
            this.requestSearch.pageNum = val;
            this.getTableList(this.requestSearch);
        },
        handleSizeChange(val) {
            this.requestSearch.pageNum = 1;
            this.requestSearch.pageSize = val;
            this.getTableList(this.requestSearch);
        },

        addSupplier() {
            this.$router.push('add');
        }
    }
};
</script>
<style scoped lang="scss">
.search-title {
    font-size: 18px;
}
.pagination {
    margin: 15px 0;
}
.row-margin {
    margin: 15px 0;
}
</style>
